<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>ZJ招聘后台管理系统 - 主页</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">总</span>
                    <h5>入驻公司</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="company_num"></h1>
                    <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                    </div>
                    <small>总数量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">本月</span>
                    <h5>Offer</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="offer_num"></h1>
                    <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>成功投递</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">本月</span>
                    <h5>用户</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="user_num"></h1>
                    <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                    </div>
                    <small>新增用户</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">本月</span>
                    <h5>访问量</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins" id="visit_num"></h1>
                    <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                    </div>
                    <small>活跃用户</small>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>用户反馈</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content ibox-heading">
                    <h3><i class="fa fa-envelope-o"></i> 新消息</h3>
                    <small><i class="fa fa-tim"></i> 您有6条未读消息</small>
                </div>
                <div class="ibox-content">
                    <div class="feed-activity-list">

                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">1月前</small>
                                <strong>夏高兴</strong>
                                <div>招聘系统反馈好评</div>
                                <small class="text-muted">4月11日 00:00</small>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right">2月前</small>
                                <strong>魏茂材 </strong>
                                <div>感觉Java职位所占比重好大，不知道为啥？</div>
                                <small class="text-muted">11月8日 20:08</small>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right">5月前</small>
                                <strong>严经纶 </strong>
                                <div>网站数据不是很完整</div>
                                <small class="text-muted">11月8日 20:08</small>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right">5月前</small>
                                <strong>侯成文</strong>
                                <div>HR端没有开发完成，还发布不了职位</div>
                                <small class="text-muted">11月8日 20:08</small>
                            </div>
                        </div>


                        <div class="feed-element">
                            <div>
                                <small class="pull-right">5月前</small>
                                <strong>崔谷槐</strong>
                                <div>又要写评论，好烦啊。。。</div>
                                <small class="text-muted">11月8日 20:08</small>
                            </div>
                        </div>
                        <div class="feed-element">
                            <div>
                                <small class="pull-right">5月前</small>
                                <strong>邓雪风 </strong>
                                <div>整体功能做出来已经很好了，局部有待完善</div>
                                <small class="text-muted">11月8日 20:08</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>中国地图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="graph_flot.html#">选项1</a>
                            </li>
                            <li><a href="graph_flot.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div style="height:600px" id="echarts-map-chart"></div>
                </div>
            </div>
        </div>


    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>


<!-- Flot -->
<script src="/js/plugins/flot/jquery.flot.js"></script>
<script src="/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="/js/plugins/flot/jquery.flot.symbol.js"></script>

<!-- Peity -->
<script src="/js/plugins/peity/jquery.peity.min.js"></script>
<script src="/js/demo/peity-demo.js"></script>


<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>

<!-- ECharts demo data -->
<script src="/js/demo/echarts-demo.js"></script>

<!-- jQuery UI -->
<script src="/js/plugins/jquery-ui/jquery-ui.min.js"></script>

<!-- Jvectormap -->
<script src="/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

<!-- EayPIE -->
<script src="/js/plugins/easypiechart/jquery.easypiechart.js"></script>

<!-- Sparkline -->
<script src="/js/plugins/sparkline/jquery.sparkline.min.js"></script>

<!-- Sparkline demo data  -->
<script src="/js/demo/sparkline-demo.js"></script>

<!-- ECharts -->
<script src="/js/plugins/echarts/echarts-all.js"></script>

<script>
    $(function () {
        var result = null;
        $.ajax({
            url: 'userareachart',
            type: 'post',
            scriptCharset: 'utf-8',
            contentType: 'application/json',
            data: "",
            success: function (data) {
                console.log(data);
                if (data != null && data != "") {
                    result = data;
                    var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
                    var mapoption = {
                        title: {
                            text: '用户地区分布',
                            subtext: '即时更新',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['男性']
                        },
                        dataRange: {
                            min: 0,
                            max: 10,
                            x: 'left',
                            y: 'bottom',
                            text: ['高', '低'],           // 文本，默认为数值文本
                            calculable: true
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            x: 'right',
                            y: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        roamController: {
                            show: true,
                            x: 'right',
                            mapTypeControl: {
                                'china': true
                            }
                        },
                        series: [
                            {
                                name: '男性',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: [
                                    {name: '北京', value: data.北京市},
                                    {name: '天津', value: data.天津市},
                                    {name: '上海', value: data.上海市},
                                    {name: '重庆', value: Math.round(Math.random() * 10)},
                                    {name: '河北', value: Math.round(Math.random() * 10)},
                                    {name: '河南', value: Math.round(Math.random() * 10)},
                                    {name: '云南', value: Math.round(Math.random() * 10)},
                                    {name: '辽宁', value: Math.round(Math.random() * 10)},
                                    {name: '黑龙江', value: Math.round(Math.random() * 10)},
                                    {name: '湖南', value: Math.round(Math.random() * 10)},
                                    {name: '安徽', value: Math.round(Math.random() * 10)},
                                    {name: '山东', value: Math.round(Math.random() * 10)},
                                    {name: '新疆', value: Math.round(Math.random() * 10)},
                                    {name: '江苏', value: data.江苏省},
                                    {name: '浙江', value: data.浙江省},
                                    {name: '江西', value: Math.round(Math.random() * 10)},
                                    {name: '湖北', value: data.湖北省},
                                    {name: '广西', value: Math.round(Math.random() * 10)},
                                    {name: '甘肃', value: Math.round(Math.random() * 10)},
                                    {name: '山西', value: Math.round(Math.random() * 10)},
                                    {name: '内蒙古', value: Math.round(Math.random() * 10)},
                                    {name: '陕西', value: Math.round(Math.random() * 10)},
                                    {name: '吉林', value: Math.round(Math.random() * 10)},
                                    {name: '福建', value: Math.round(Math.random() * 10)},
                                    {name: '贵州', value: Math.round(Math.random() * 10)},
                                    {name: '广东', value: data.广东省},
                                    {name: '青海', value: Math.round(Math.random() * 10)},
                                    {name: '西藏', value: Math.round(Math.random() * 10)},
                                    {name: '四川', value: Math.round(Math.random() * 10)},
                                    {name: '宁夏', value: Math.round(Math.random() * 10)},
                                    {name: '海南', value: Math.round(Math.random() * 10)},
                                    {name: '台湾', value: Math.round(Math.random() * 10)},
                                    {name: '香港', value: Math.round(Math.random() * 10)},
                                    {name: '澳门', value: Math.round(Math.random() * 10)}
                                ]
                            }
                        ]
                    };

                    mapChart.setOption(mapoption);
                    $(window).resize(mapChart.resize);

                }
            }
        })

        $.ajax({
            url: 'webcount',
            type: 'get',
            contentType: 'application/json',
            data: '',
            dataType: "json",
            success: function (data) {
                if (data != null && data != "") {
                    $("#company_num").text(data.companynum);
                    $("#user_num").text(data.usernum);
                    $("#offer_num").text(data.offernum);
                    $("#visit_num").text(data.visitnum);
                }
            }
        })

    });

</script>
</body>

</html>
